<template>
    <div class="activity">
        <Page ref="page" v-bind="page" />
        <AddActivity ref="addActivity" @saveSuccess="refresh" />
        <UpdateActivity ref="updateActivity" @saveSuccess="refresh" />
        <activityDetail ref="activityDetail" />
    </div>
</template>
<script>
import Page from '@/components/Page/index.vue'
import AddActivity from './addActivity.vue'
import UpdateActivity from './updateActivity.vue'
import activityDetail from './activityDetail2.vue'
import ENUMS from '@/enums/activity'
import { getActivityList, doCancelActivity } from '@/api/market/activity'
import { mapGetters } from 'vuex'
import { msgConfirm } from '@/utils/utils.js'
import auth from './auth.js'
export default {
    components: {
        Page,
        AddActivity,
        UpdateActivity,
        activityDetail
    },
    data() {
        return {
            page: {
                pageSearchFrame: [
                    {
                        key: 'activityName',
                        label: '活动名称',
                        placeholder: '模糊匹配',
                        frameType: 'input'
                    },
                    {
                        key: 'status',
                        label: '活动状态',
                        frameType: 'select',
                        options: ENUMS.STATUS
                    },
                    {
                        key: 'createUser',
                        label: '创建人',
                        placeholder: '模糊匹配',
                        frameType: 'input'
                    },
                    {
                        key: 'time',
                        label: '开始时间',
                        placeholder: '请选择起止时间',
                        frameType: 'datetimerange',
                        style: 'width:340px'
                    },
                    {
                        key: 'activityType',
                        hide: true
                    }
                ],
                pageSearchData: {
                    activityType: 1
                },
                buttons: [
                    {
                        functionId: auth.add,
                        value: '添加活动',
                        click: () => this.$refs.addActivity.show()
                    }
                ],
                pageTableFrame: [
                    {
                        key: 'No',
                        label: 'No.',
                        type: 'index'
                    },
                    {
                        label: '活动ID',
                        key: 'id',
                        width: '60px'
                    },
                    {
                        label: '活动名称',
                        key: 'activityName',
                        align: 'left'
                    },
                    {
                        label: '活动状态',
                        key: 'status',
                        width: '70px',
                        frameType: 'tag',
                        tag(data, row) {
                            return ENUMS.STATUS.find((v) => v.id == data).tag || ''
                        },
                        render: function (data, row) {
                            return ENUMS.STATUS.find((v) => v.id == data).text || ''
                        }
                    },
                    {
                        label: '开始时间',
                        key: 'startTimeString'
                    },
                    {
                        label: '结束时间',
                        key: 'endTimeString'
                    },
                    {
                        label: '创建人/创建时间',
                        key: 'createUser',
                        frameType: 'mulitiValue',
                        mulitiValue: [{ key: 'createUser' }, { key: 'createTimeString' }]
                    },
                    {
                        label: '操作',
                        frameType: 'buttons',
                        align: 'left',
                        key: 'operate',
                        buttons: [
                            {
                                functionId: auth.detail,
                                value: '查看',
                                icon: 'el-icon-view',
                                click: this.detail
                            },
                            {
                                functionId: auth.edit,
                                value: '编辑',
                                icon: 'el-icon-edit',
                                visible: function (full) {
                                    return full.status == '1' || (full.status == '2' && full.type == '2')
                                },
                                click: (row) => this.$refs.updateActivity.show(row)
                            },
                            {
                                functionId: auth.cancel,
                                value: '取消',
                                icon: 'el-icon-document-remove',
                                visible: function (full) {
                                    return full.status == '1'
                                },
                                click: this.cancel
                            },
                            {
                                functionId: auth.detail,
                                value: '查看2',
                                icon: 'el-icon-view',
                                click: this.detail2
                            }
                        ]
                    }
                ],
                searchFun: getActivityList,
                labelWidth: '80px',
                preSearch: this.preSearch
            }
        }
    },
    computed: {
        ...mapGetters(['name'])
    },
    methods: {
        refresh() {
            this.$refs.page.onSearch()
        },
        preSearch(data) {
            //产品ID
            let query = data
            if (query.time) {
                query.timeStart = query.time[0]
                query.timeEnd = query.time[1]
                delete query.time
            }
            return true
        },
        detail(row) {
            this.$router.push({
                path: '/demo/activity/activityDetail',
                query: { data: JSON.stringify(row) }
            })
        },
        detail2(row) {
            this.$refs.activityDetail.show(row)
        },
        cancel(row) {
            msgConfirm('确定取消此活动吗?<br><span style="color:red"> 提示：取消后将无法重启</span>', () => {
                return doCancelActivity({
                    activityId: row.id,
                    userName: this.name
                }).then((data) => {
                    this.$success('取消活动成功!')
                    this.$refs.page.onSearch()
                })
            })
        }
    }
}
</script>
<style lang="scss">
.activity .page-search-form {
    .el-cascader {
        width: 100%;
    }
    .el-select,
    .el-input {
        width: 210px;
    }
}
</style>
